<!--suppress ALL -->
<include file="./Template/header.html" />
<link rel="stylesheet" type="text/css" href="/Template/css/orderList.css?v=2020051002">
<script type="text/javascript">

    $(function() {

        //初始化页面配置
        initPage("成品购物车");

        var app = new Vue({
            el: '#container',
            data: {
                orderList: [],
                number:0,
                totalPrice:0,
//                submit:0
            },
            methods: {
                remove: function(id, name, num) {
                    if(confirm("是否从购物车移除 "+num+" 件【" + name + "】?")){
                        window.location.href = "/wechat/finishedProduct/removeOrder/id/"+id;
                    }
                },
                cancelOrder: function () {
                    window.location.href = "/wechat/finishedProduct";
                },
                createOrder: function() {
                    var deliveryType = $("select[name=deliveryType]").val();
                    var receiveName = $("input[name=receiveName]").val();
                    var receiveContact = $("input[name=receiveContact]").val();
                    var receiveAddress = $("input[name=receiveAddress]").val();
                    var patientName = $("input[name=patientName]").val();
                    var paymentType = $("select[name=paymentType]").val();
                    var note = $("input[name=note]").val();
                    var needInvoice = $("select[name=needInvoice]").val();
                    var invoiceName = $("input[name=invoiceName]").val();
                    var invoiceNumber = $("input[name=invoiceNumber]").val();
                    var invoiceDetail = $("input[name=invoiceDetail]").val();
                    var needPatient = $("input[name=needPatient]").val();
                    var number = app.number;
                    if(number == 0) {
                        alert("购物车是空的");
                        return false;
                    }

                    if(number < 2 && needPatient == 1) {
                        if (isNullOrEmpty(patientName)) {
                            alert("请填写患者姓名");
                            return false;
                        }

                    }

                    if(isNullOrEmpty(receiveName)) {
                        alert("请填写收货人姓名");
                        return false;
                    }

                    if(isNullOrEmpty(deliveryType)) {
                        alert("请选择提货方式");
                        return false;
                    }
                    if(isNullOrEmpty(paymentType)) {
                        alert("请选择付款方式");
                        return false;
                    }
                    if(deliveryType != "自提"){
                        if(isNullOrEmpty(receiveAddress)) {
                            alert("请填写收货人地址");
                            return false;
                        }
                    }

                    if(isNullOrEmpty(receiveContact)) {
                        alert("请填写收货人电话");
                        return false;
                    }

                    if(!checkPhone(receiveContact)) {
                        alert("手机号位数不对");
                        return false;
                    }

                    if(needInvoice == 1) {
                        if(isNullOrEmpty(invoiceName)) {
                            alert("请填写发票抬头");
                            return false;
                        }
                        if(isNullOrEmpty(invoiceNumber)) {
                            alert("请填写纳税人识别号");
                            return false;
                        }
                    }
//                    if(needInvoice != -1) {
//                        if(isNullOrEmpty(invoiceDetail)) {
//                            alert("请填写发票明细");
//                            return false;
//                        }
//                    }

                    var data = {};

                    data.deliveryType = deliveryType;
                    data.receiveName = receiveName;
                    data.receiveContact = receiveContact;
                    data.receiveAddress = receiveAddress;
                    data.patientName = patientName;
                    data.note = note;
                    data.needInvoice = needInvoice;
                    data.invoiceName = invoiceName;
                    data.invoiceNumber = invoiceNumber;
                    data.invoiceDetail = invoiceDetail;
                    data.paymentType = paymentType;

                    if(confirm("请确认是否提交购物车订单？")){
                        $.ajax({
                            url:"/wechat/finishedProduct/submitCart",
                            type:"post",
                            data:data,
                            dataType:"JSON",
                            beforeSend:function(){
                                $("#loadingToast").show();
                                $("#submitBtn").hide();
                            },
                            complete:function(){
                                $('#loadingToast').hide();
                            },
                            success:function(data){
                                if(data.code != 200) {
                                    alert("success:"+data.code);
//                                    app.submit = 1;
//                                    window.localStorage.setItem("cartOrderData", null);
//                                    window.localStorage.removeItem("cartOrderData");
                                    window.location.href = "/wechat/finishedProduct/orderList";
                                }else{
//                                    app.submit = 1;
//                                    window.localStorage.setItem("cartOrderData", null);
//                                    window.localStorage.removeItem("cartOrderData");
                                    window.location.href = "/wechat/finishedProduct/orderList";
                                }

                            },
                            error:function(data){
                                alert("error:"+data.code);
//                                app.submit = 1;
//                                window.localStorage.setItem("cartOrderData", null);
//                                window.localStorage.removeItem("cartOrderData");
                                window.location.href = "/wechat/finishedProduct/orderList";
                            }
                        })
                    }else{
                        return;
                    }


                },
            }
        })

        function getOrderList() {

            $.ajax({
                url:"/wechat/finishedProduct/myOrderCart",
                type:"post",
                data:{
//                    status: status,
                },
                dataType:"JSON",
                beforeSend:function(){
                    $("#loadingToast").show();
                },
                complete:function(){
                    $('#loadingToast').hide();
                },
                success:function(data){
                    app.orderList = data;
                    if(isNullOrEmpty(data))
                        return false;
                    for(var i=0;i<app.orderList.length;i++) {
                        app.number += parseInt(app.orderList[i]["number"]);
                        app.totalPrice += parseInt(app.orderList[i]["total_price"]);
                    }
                    setTimeout(function() {
                        $(".ui-item.measure-info img").bind("click", function() {
                            var upUrl = "/Template/images/icon-up.png";
                            var downUrl = "/Template/images/icon-down.png";
                            $(this).parent().next().toggle();
                            if($(this).attr("src") == upUrl) {
                                $(this).attr("src", downUrl);
                            } else {
                                $(this).attr("src", upUrl);
                            }
                        });
                        $(".ui-item.measure-info img").each(function() {
                            $(this).trigger("click");
                        });
                    },200);
                },
            })
        }

        getOrderList();

        $(".item select").change(function() {
            var value = $(this).find("option:selected").text();
            $(this).prev().val(value);
        });

        $("select[name=needInvoice]").change(function() {
            if($(this).val() == 1) {
                $(".item.invoice").show();
            } else {
                $(".item.invoice").hide();
            }
            if($(this).val() == -1) {
                $(".item.invoiceDetail").hide();
            } else {
                $(".item.invoiceDetail").show();
            }
        });

        $("select[name=deliveryType]").change(function() {
            if($(this).val() == "自提") {
                $(".item.receiveAddress").hide();
            } else {
                $(".item.receiveAddress").show();
            }
        });

        $("img.icon-up").click(function() {

            $(this).hide();
            $("img.icon-down").show();

            $(".size-detail").toggle();

        });

        $("img.icon-down").click(function() {

            $(this).hide();
            $("img.icon-up").show();

            $(".size-detail").toggle();

        });

        var isPageHide = false;
        window.addEventListener('pageshow', function () {
            if (isPageHide) {
                window.location.reload();
            }
        });
        window.addEventListener('pagehide', function () {
            isPageHide = true;
            var data = {};

            var deliveryType = $("select[name=deliveryType]").val();
            var receiveName = $("input[name=receiveName]").val();
            var receiveContact = $("input[name=receiveContact]").val();
            var receiveAddress = $("input[name=receiveAddress]").val();
            var patientName = $("input[name=patientName]").val();
            var note = $("input[name=note]").val();
            var needInvoice = $("select[name=needInvoice]").val();
            var invoiceName = $("input[name=invoiceName]").val();
            var invoiceNumber = $("input[name=invoiceNumber]").val();
            var invoiceDetail = $("input[name=invoiceDetail]").val();
            var needPatient = $("input[name=needPatient]").val();

            data.deliveryType = deliveryType;
            data.receiveName = receiveName;
            data.receiveContact = receiveContact;
            data.receiveAddress = receiveAddress;
            data.patientName = patientName;
            data.note = note;
            data.needInvoice = needInvoice;
            data.invoiceName = invoiceName;
            data.invoiceNumber = invoiceNumber;
            data.invoiceDetail = invoiceDetail;
            data.needPatient = needPatient;

//            if(app.submit == 0){
                localStorage.setItem("cartOrderData", JSON.stringify(data));
                localStorage.setItem("finishedOrderData", JSON.stringify(data));
//            }
        });

        var leftData = window.localStorage.getItem("cartOrderData");
        if(!isNullOrEmpty(leftData)) {
            var cartOrderData = JSON.parse(leftData);

            if(!isNullOrEmpty(cartOrderData)) {

                    $("select[name=deliveryType]").val(cartOrderData.deliveryType);
                    $("input[name=receiveName]").val(cartOrderData.receiveName);
                    $("input[name=receiveContact]").val(cartOrderData.receiveContact);
                    $("input[name=receiveAddress]").val(cartOrderData.receiveAddress);
                    $("input[name=patientName]").val(cartOrderData.patientName);
                    $("input[name=note]").val(cartOrderData.note);
                    $("select[name=needInvoice]").val(cartOrderData.needInvoice);
                    $("input[name=invoiceName]").val(cartOrderData.invoiceName);
                    $("input[name=invoiceNumber]").val(cartOrderData.invoiceNumber);
                    $("input[name=invoiceDetail]").val(cartOrderData.invoiceDetail);
                    $("input[name=needPatient]").val(cartOrderData.needPatient);

                    $("input#transport").val(cartOrderData.deliveryType);

                    var value = $("select[name=needInvoice]").find("option:selected").text();
                    $("select[name=needInvoice]").prev().val(value);

                    if($("select[name=needInvoice]").val() == 1) {
                        $(".item.invoice").show();
                    } else {
                        $(".item.invoice").hide();
                    }
                    if($("select[name=needInvoice]").val() == -1) {
                        $(".item.invoiceDetail").hide();
                    } else {
                        $(".item.invoiceDetail").show();
                    }

                    if($("select[name=deliveryType]").val() == "自提") {
                        $(".receiveAddress").hide();
                    } else {
                        $(".receiveAddress").show();
                    }

            }

        }else{
            $("select[name=deliveryType]").val("");
            $("input[name=receiveName]").val("");
            $("input[name=receiveContact]").val("");
            $("input[name=receiveAddress]").val("");
            $("input[name=patientName]").val("");
            $("input[name=note]").val("");
            $("select[name=needInvoice]").val("");
            $("input[name=invoiceName]").val("");
            $("input[name=invoiceNumber]").val("");
            $("input[name=invoiceDetail]").val("");
            $("input#transport").val("");
            $("select[name=needInvoice]").val(-1);
            $("input[name=needPatient]").val("");
        }

    });

</script>
<div class="container" id="container">
    <div id="my-order">
        <ul>
            <li class="li-status-1 active">
                <span>购物车总金额：<a style="color: #d92f3b">￥ {{totalPrice}} </a></span>
            </li>
        </ul>
    </div>
    <div class="order-detail">
        <div class="no-data" v-if="orderList == null")>暂无数据</div>
        <div class="order-info" v-for="order in orderList">
            <div style="height: 10px; background-color: #f5f5f5" class="status active">
                <!--<img src="/Template/images/icon-cart.png" alt="">-->
                <!--<span class="status-content">{{order.admin_name}}</span>-->
            </div>
            <div class="have-padding">
                <div class="product-info">
                    <img class="product-img" src="{{order.image_url}}" alt="product">
                    <div class="detail-info">
                        <p class="product-price">￥{{order.sale_price}}</p>
                        <p class="product-name">{{order.finished_product_name}}</p>
                        <p class="number">×{{order.number}}</p>
                        <p class="buy-time">{{order.create_time}}</p>

                    </div>
                    <div>
                        <p class="singlePrice">原单价：{{order.single_price}}</p>
                        <p class="sum">共 <a style="color: #e97a15">{{order.number}}</a> 件商品 合计:<span style="color: #d92f3b;">￥{{order.total_price}}</span></p>
                    </div>

                </div>
                <div class="line"></div>
                <div class="user-order-info">
                    <div class="ui-item pickUp-info">
                        <span class="item-left">规格</span>
                        <span class="item-right" style="color: #45a1de;">{{order.size}}</span>
                    </div>
                    <div v-if="order.agent_name != '无' && order.agent_name != ''">
                        <div class="ui-item pickUp-info">
                            <span class="item-left">渠道</span>
                            <span class="item-right">{{order.agent _name}}</span>
                        </div>
                    </div>
                    <button v-on:click="remove(order.finished_order_id, order.finished_product_name, order.number)">删 除</button>
                </div>
            </div>
            <br/>
        </div>
    </div>
    <div class="patient-info agent">
        <div class="item">
            <span>患者姓名</span>
            <input type="text" name="patientName" placeholder="多个患者可不填">
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
        <input type="text" style="display: none;" name="needPatient">
    </div>

    <div class="address-info">
        <div class="item">
            <span>提货方式</span>
            <input id="transport" value="快递包邮" type="text" readonly placeholder="请选择提货方式">
            <select name="deliveryType">
                <option value="快递包邮">快递包邮</option>
                <option value="快递到付">快递到付</option>
                <option value="自提">自提</option>
            </select>
            <img class="icon-right gender" src="/Template/images/icon-right.png" alt="">
        </div>
        <div class="item">
            <span>收货人姓名</span>
            <input type="text" name="receiveName" placeholder="请填写收货人姓名">
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
        <div class="item">
            <span>收货人电话</span>
            <input type="text" name="receiveContact" placeholder="请填写收货人电话">
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
        <div class="item receiveAddress">
            <span>收货地址</span>
            <input type="text" name="receiveAddress" placeholder="请填写收货地址">
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
    </div>

    <div class="product-need">
        <div class="item">
            <span>付款方式</span>
            <input name="paymentType" value="" type="text" readonly placeholder="请选择款方式">
            <select name="paymentType">
                <option value=""></option>
                <option value="现结">现结</option>
                <option value="半月结">半月结</option>
                <option value="月结">月结</option>
            </select>
            <img class="icon-right gender" src="/Template/images/icon-right.png" alt="">
        </div>
        <div class="item">
            <span>留言备注</span>
            <input type="text" name="note" placeholder="请编辑备注信息">
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
        <div class="item">
            <span>是否开发票</span>
            <input type="text" value="不开发票" name="needInvoice" readonly placeholder="">
            <select name="needInvoice" class="invoice-choose">
                <option value="-1">不开发票</option>
                <option value="1">公司发票</option>
                <option value="2">个人发票</option>
            </select>
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
        <div class="item invoice" style="display: none;">
            <span>发票抬头</span>
            <input name="invoiceName" type="text" placeholder="请填写发票抬头">
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
        <div class="item invoice" style="display: none;">
            <span>纳税人识别号</span>
            <input name="invoiceNumber" type="text" placeholder="请填纳税人识别号">
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
        <div class="item invoiceDetail" style="display: none;">
            <span>发票明细</span>
            <input name="invoiceDetail" type="text" placeholder="请填写发票明细" value="{$finishedProduct.invoice_detail}">
            <img class="icon-right" src="/Template/images/icon-right.png" alt="">
        </div>
    </div>
    <div class="order-operation">

        <p style="margin-left: 20%;width: 55%">共 <a style="color: #e97a15">{{number}}</a> 件商品,合计：<span>￥{{totalPrice}}</span> </p>
        <button class="cancel-order" v-on:click="cancelOrder">返回</button>
        <button id="submitBtn" class="submit-order" v-on:click="createOrder">提交订单</button>
    </div>
</div>

<include file="./Template/footer.html" />

